<template>
  <div>
    <van-nav-bar title="预衣洗衣" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="cate">
      <div class="cate-right">
        <ul>
          <li @click="changeMenu(index)" v-for="(item, index) in cateList" :key="index"
            :class="index == i ? 'active' : ''">
            {{ item.type_name }}
          </li>
        </ul>
      </div>
      <div class="cate-left">
        <ul>
          <li v-for="item of proList" :key="item.id">
            <div class="cate-left-item flex_r">
              <div>
                <img :src="item.pro_img" alt="" class="cate-left-item-img" />
              </div>
              <div class="flex_c">
                <p>{{ item.pro_title }}</p>
                <p class="flex_r_b">
                  <span class="price">￥{{ item.pro_price }}</span>
                  <button type="button" class="cate-left-car" v-show="item.pro_num == 0" @click.stop="goCar(item)">
                    加入购物车
                  </button>

                  <van-stepper :min="0" theme="round" button-size="24" disable-input @plus='goCar(item)'
                    @minus='cut(item)' v-show="item.pro_num > 0" v-model="item.pro_num" />
                </p>
                <del class="pre_price">￥{{ item.pro_oldprice }}</del>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <footer class="cate-footer">
      <van-icon name="cart-o" :badge="num" size="30" color="#fff" />
      <button type="button" @click="intoCar">加入购物车</button>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showToast } from "vant";
import { useRouter } from "vue-router";
import { gethttp, httpGetToken, httpPostToken, } from "../../utils/request";

const router = useRouter();

// 产品的数据
const proList: any = ref([
  {
    pro_id: 1,
    pro_title: "商品1",
    pro_price: 0,
    pro_oldprice: 0,
    pro_num: 0, // 添加 pro_num 字段
  },
]);

// 产品接口   /api/product 并发请求
const getListData = async (index: number) => {
  // 产品接口
  let res: any = await gethttp("/api/product", "get", { type_n: index });
  // 购物车
  let res1: any = await httpGetToken("/api/car", "get", null)
  // alert(9999)
  // console.log(res.data) 改变原数组 原来的产品中没有给你 产品的数量
  res.data.forEach((item: any) => {
    item.pro_num = 0;

    res1.data.forEach((child: any) => {

      if (item.pro_id == child.pro_id) {
        // 数量给到产品
        item.pro_num = child.pro_num;

      }

    });


  });


  proList.value = res.data;
};

getListData(0);

// 左边菜单栏 /api/category
const cateList = ref([{ type_name: "" }]);
gethttp("/api/category", 'get', null).then((res: any) => {
  cateList.value = res.data;
});

const num: any = ref(0); // 初始化为0


// //获取购物车列表  /api/car  get 刷新购物车数量
const backCarNum = async () => {
 
  // alert("执行了吗")
  // alert(10)
  let res:any = await httpGetToken("/api/car", "get", null)
  if (res.status === 200) {
    let js: number = 0
    res.data.forEach((item: any) => {

      js += Number(item.pro_num)
    });
    console.log(js + '是多少')

    num.value = js
  }



  // httpGetToken("/api/car", "get", null).then((res: any) => {

  //     if (res.status === 200) {
  //       // 遍历循环购物车每个你需要 清洗衣服的数量的累加
  //       let js:number = 0
  //       res.data.forEach((item: any) => {

  //         js += Number(item.pro_num) 
  //       });
  //       console.log(js + '是多少')

  //     num.value = js

  //     // console.log(num.value + '是多少')

  //   }

  // });
}
backCarNum()

// 左边菜单栏点击事件
const i = ref(0);
const changeMenu = (index: number) => {
  i.value = index;
  // 调用接口
  getListData(index);
};

// 如果用户没有登录跳转到登录页面 加入购物车
const goCar = (item: Object) => {


  const token = localStorage.getItem("token");
  if (!token) {
    router.push({
      path: "/login",
    });
  } else {
    joinCar(item);
  }
};
// 加入购物的功能
const joinCar = async (item: any) => {
  // 一开始全部赋值的产品pro_num=0
  item.pro_num += 1;

  let res: any = await httpPostToken("/api/car", "POST", {
    pro_id: item.pro_id,
    pro_num: item.pro_num,
  });
  showToast({
    message: "加入购物车成功",
    duration: 1000,
  });
  let d = await backCarNum()

  // backCarNum()
};

// 计步器的调用接口
const setpCar = async (item: any) => {
  // joinCar(item)
  // console.log(item.pro_num);
  let num: number = Number(item.pro_num);

  let res = httpPostToken("/api/car", "POST", {
    pro_id: item.pro_id,
    pro_num: num,
  });
  showToast({
    message: "加入购物车成功2",
    duration: 1000,
  });
  backCarNum()
};

//减法
const cut = async (item: any) => {

  item.pro_num -= 1
  if(item.pro_num <= 0){
    return false;
  }
  // alert(item.pro_num)
  const res = await httpPostToken("/api/car", "POST", {
    pro_id: item.pro_id,
    pro_num: item.pro_num,
  });

  showToast({
    message: "加入购物车成功",
    duration: 1000,
  });
  await backCarNum()
}
const intoCar = () => {
  const token = localStorage.getItem("token");
  router.push({
    path: "/car",
  });
};

// onClickLeft返回上一级
const onClickLeft = () => {
  router.go(-1);
};
</script>



<style lang="less" scoped>
@active_color: #03a19c;

:deep(.van-nav-bar__text) {
  color: @active_color;
}

.flex_c {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.flex_r_b {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
}

.cate {
  display: flex;
}

.cate-right {
  position: absolute;
  top: 92px;
  bottom: 120px;
  width: 30%;
  background: #fff;

  li {
    padding: 20px;
    border-left: 8px solid #fff;
  }
}

.cate-left {
  background: #f5f5f5;
  position: absolute;
  left: 30%;
  top: 92px;
  bottom: 120px;
  right: 0;
  padding: 20px;

  li {
    background: #fff;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0px 0px 30px #ededed;

    .cate-left-item-img {
      width: 140px;
      height: 160px;
      margin-right: 10px;
    }

    .price {
      color: #ff0000;
      font-weight: bold;
      margin-right: 20px;
    }

    .pre_price {
      color: #999;
      font-size: 28px;
    }

    .cate-left-car {
      border: none;
      outline: none;
      margin-left: 10px;
      background: @active_color;
      padding: 8px 16px;
      border-radius: 20px;
      color: #fff;
      font-size: 26px;
    }
  }
}

.cate-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: @active_color;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;

  button {
    border: none;
    outline: none;
    background: #fff;
    color: @active_color;
    border-radius: 30px;
    padding: 10px 30px;
  }
}

.active {
  color: @active_color;
  border-left: 8px solid @active_color !important;
  transition: all 0.2s linear;
}
</style>